வலை அணுகல் சோதனை: உலகளாவிய பார்வையாளர்களுக்கான ஜாவாஸ்கிரிப்ட் ஸ்கிரீன் ரீடர் இணக்கத்தன்மை

இன்றைய வலை உலகில், ஜாவாஸ்கிரிப்ட் மிகவும் சிக்கலான மற்றும் மாறும் பயனர் அனுபவங்களை இயக்குகிறது. ஒற்றை-பக்க பயன்பாடுகள் முதல் சிக்கலான ஊடாடும் கூறுகள் வரை, ஜாவாஸ்கிரிப்ட் இன்றியமையாதது. இருப்பினும், ஜாவாஸ்கிரிப்ட்டை சார்ந்திருப்பது வலை அணுகலுக்கு, குறிப்பாக ஸ்கிரீன் ரீடர் இணக்கத்தன்மைக்கு குறிப்பிடத்தக்க சவால்களை அளிக்கிறது. இந்த விரிவான வழிகாட்டி, ஸ்கிரீன் ரீடர் பயனர்கள் மற்றும் உலகளாவிய அணுகல் சிறந்த நடைமுறைகளில் கவனம் செலுத்தி, ஜாவாஸ்கிரிப்ட் உடன் வலை அணுகலைச் சோதிப்பது பற்றிய ஆழமான நுண்ணறிவுகளை வழங்குகிறது.

ஜாவாஸ்கிரிப்ட் மற்றும் ஸ்கிரீன் ரீடர்களின் சந்திப்பைப் புரிந்துகொள்ளுதல்

ஸ்கிரீன் ரீடர்கள் என்பவை பார்வை குறைபாடுள்ள பயனர்கள் உரை மற்றும் பிற தகவல்களை பேச்சு அல்லது பிரெய்லாக மாற்றுவதன் மூலம் டிஜிட்டல் உள்ளடக்கத்தை அணுக உதவும் உதவித் தொழில்நுட்பங்கள் ஆகும். NVDA, JAWS, VoiceOver, மற்றும் TalkBack (Android) போன்ற நவீன ஸ்கிரீன் ரீடர்கள் அதிநவீன கருவிகளாகும். இருப்பினும், அவை உள்ளடக்கத்தை திறம்பட புரிந்துகொண்டு வழங்குவதற்கு அடிப்படை HTML கட்டமைப்பு மற்றும் ARIA (Accessible Rich Internet Applications) பண்புக்கூறுகளைச் சார்ந்துள்ளன. ஜாவாஸ்கிரிப்ட், கவனமாக செயல்படுத்தப்படாவிட்டால், இந்த செயல்முறையை சீர்குலைக்கக்கூடும்.

ஜாவாஸ்கிரிப்ட்டால் DOM (Document Object Model)-ஐ மாறும் வகையில் மாற்ற முடியும் என்பதே முக்கியப் பிரச்சனை. ஜாவாஸ்கிரிப்ட் சரியான ARIA பண்புக்கூறுகள் அல்லது சொற்பொருள் HTML இல்லாமல் உள்ளடக்கத்தைப் புதுப்பிக்கும்போது, ஸ்கிரீன் ரீடர்கள் இந்த மாற்றங்களை அடையாளம் காணத் தவறக்கூடும், இது பயனர்களுக்கு முழுமையற்ற அல்லது குழப்பமான அனுபவத்தை அளிக்கிறது. உலகெங்கிலும் உள்ள பயனர்கள் பயன்படுத்தும் பல்வேறு ஸ்கிரீன் ரீடர் மற்றும் உலாவி சேர்க்கைகளால் இது மேலும் சிக்கலாகிறது.

ஜாவாஸ்கிரிப்ட் உடன் பொதுவான அணுகல் சவால்கள்

• மாறும் உள்ளடக்க புதுப்பிப்புகள்: ஸ்கிரீன் ரீடருக்குத் தெரிவிக்காமல் உள்ளடக்கத்தைப் புதுப்பிப்பது பயனர்கள் முக்கியத் தகவல்களைத் தவறவிடுவதற்கு வழிவகுக்கும். எடுத்துக்காட்டாக, ஒரு AJAX கோரிக்கை பக்கத்தின் ஒரு பகுதியை ARIA லைவ் பகுதி இல்லாமல் புதுப்பிப்பது.
• தனிப்பயன் கட்டுப்பாடுகள்: தனிப்பயன் ஜாவாஸ்கிரிப்ட் அடிப்படையிலான கட்டுப்பாடுகளை (எ.கா., தனிப்பயன் கீழிறங்கு மெனுக்கள், ஸ்லைடர்கள், மோடல் உரையாடல்கள்) சரியான ARIA பண்புக்கூறுகள் இல்லாமல் உருவாக்குவது அவற்றை ஸ்கிரீன் ரீடர் பயனர்களுக்கு அணுக முடியாததாக ஆக்குகிறது.
• சிக்கலான ஊடாட்டங்கள்: இழுத்து-விடுதல் அல்லது முடிவற்ற ஸ்க்ரோலிங் போன்ற சிக்கலான ஊடாட்டங்களுக்கு பயன்பாட்டினை உறுதிப்படுத்த ARIA ரோல்கள் மற்றும் பண்புக்கூறுகளுடன் கவனமான செயல்படுத்தல் தேவைப்படுகிறது.
• கவன மேலாண்மை: மோசமான கவன மேலாண்மை பயனர்களை ஒரு குறிப்பிட்ட இடத்தில் சிக்க வைக்கலாம் அல்லது ஸ்கிரீன் ரீடரைப் பயன்படுத்தி வழிசெல்லும்போது அவர்களை திசைதிருப்பலாம்.
• சொற்பொருள் HTML இல்லாமை: சொற்பொருள் HTML5 குறிச்சொற்களுக்கு (எ.கா., <article>, <nav>, <aside>) பதிலாக பொதுவான <div> மற்றும் <span> கூறுகளைப் பயன்படுத்துவது ஸ்கிரீன் ரீடர்கள் பக்கத்தின் கட்டமைப்பைப் புரிந்துகொள்வதை கடினமாக்குகிறது.
• அனிமேஷன்கள் மற்றும் மாற்றங்கள்: அனிமேஷன்கள் வலிப்பு நோய்களை ஏற்படுத்தாதவாறு அல்லது அறிவாற்றல் குறைபாடுகள் உள்ள பயனர்களை திசைதிருப்பாதவாறு செயல்படுத்தப்பட வேண்டும். தேவையற்ற அனிமேஷன்களை இடைநிறுத்த அல்லது முடக்க விருப்பங்களை வழங்கவும்.

அத்தியாவசிய வலை அணுகல் சோதனை நுட்பங்கள்

வலை அணுகலை சோதிப்பதற்கு ஒரு பன்முக அணுகுமுறை தேவைப்படுகிறது. ஜாவாஸ்கிரிப்ட் ஸ்கிரீன் ரீடர் இணக்கத்தன்மையை உறுதி செய்வதற்கு பின்வரும் நுட்பங்கள் முக்கியமானவை:

1. கைமுறை ஸ்கிரீன் ரீடர் சோதனை

ஸ்கிரீன் ரீடர்களுடன் கைமுறையாக சோதனை செய்வது மிக முக்கியமான படியாகும். இது உங்கள் வலைத்தளத்தில் வழிசெல்லவும் அதன் கூறுகளுடன் ஊடாடவும் ஒரு ஸ்கிரீன் ரீடரை (எ.கா., NVDA, JAWS, VoiceOver) நேரடியாகப் பயன்படுத்துவதை உள்ளடக்கியது. இது ஒரு ஸ்கிரீன் ரீடர் பயனர் வலைத்தளத்தை எப்படி அனுபவிப்பார் என்பதை நீங்கள் அனுபவிக்க அனுமதிக்கிறது, தானியங்கி கருவிகள் தவறவிடக்கூடிய சாத்தியமான பயன்பாட்டு சிக்கல்களை அடையாளம் காண உதவுகிறது.

கைமுறை சோதனைக்கான முக்கியக் கருத்துகள்:

• பல்வேறு ஸ்கிரீன் ரீடர்களைத் தேர்ந்தெடுக்கவும்: வெவ்வேறு ஸ்கிரீன் ரீடர்கள் வலை உள்ளடக்கத்தை வெவ்வேறு விதமாக விளக்குகின்றன. பரந்த இணக்கத்தன்மையை உறுதிப்படுத்த பல ஸ்கிரீன் ரீடர்கள் (எ.கா., NVDA, JAWS, VoiceOver) மற்றும் உலாவி சேர்க்கைகளுடன் சோதிக்கவும்.
• அடிப்படை ஸ்கிரீன் ரீடர் கட்டளைகளைக் கற்றுக்கொள்ளுங்கள்: நீங்கள் பயன்படுத்தும் ஸ்கிரீன் ரீடர்களுக்கான பொதுவான கட்டளைகளை (எ.கா., தற்போதைய உறுப்பைப் படித்தல், தலைப்புகள், பட்டியல்கள் அல்லது லேண்ட்மார்க்குகள் மூலம் வழிசெலுத்துதல்) தெரிந்து கொள்ளுங்கள்.
• முக்கிய செயல்பாடுகளில் கவனம் செலுத்துங்கள்: படிவம் சமர்ப்பித்தல், வழிசெலுத்தல் மற்றும் உள்ளடக்க நுகர்வு போன்ற முக்கியமான பணிப்பாய்வுகள் மற்றும் ஊடாட்டங்களைச் சோதிப்பதற்கு முன்னுரிமை அளியுங்கள்.
• பல்வேறு சாதனங்களில் சோதிக்கவும்: வெவ்வேறு ஸ்கிரீன் ரீடர் நடத்தைகள் மற்றும் பயனர் சூழல்களைக் கணக்கில் கொள்ள டெஸ்க்டாப் மற்றும் மொபைல் சாதனங்களில் சோதிக்கவும். டேப்லெட்டுகளிலும் சோதிப்பதைக் கருத்தில் கொள்ளுங்கள்.

எடுத்துக்காட்டு: ஒரு தனிப்பயன் கீழிறங்கு மெனுவைச் சோதித்தல்

நீங்கள் ஜாவாஸ்கிரிப்ட் மூலம் ஒரு தனிப்பயன் கீழிறங்கு மெனுவை உருவாக்கியுள்ளீர்கள் என்று வைத்துக்கொள்வோம். ஒரு ஸ்கிரீன் ரீடரைப் பயன்படுத்தி, நீங்கள் பின்வருவனவற்றைச் சரிபார்க்க வேண்டும்:

• கீழிறங்கு மெனு விசைப்பலகை (Tab விசை) மூலம் கவனம் செலுத்தக்கூடியதாக உள்ளது.
• ஸ்கிரீன் ரீடர் கீழிறங்கு மெனுவின் நோக்கத்தை அறிவிக்கிறது (எ.கா., "ஒரு நாட்டைத் தேர்ந்தெடுக்கவும்").
• ஸ்கிரீன் ரீடர் தற்போது தேர்ந்தெடுக்கப்பட்ட விருப்பத்தை அறிவிக்கிறது.
• கீழிறங்கு மெனு விரிவாக்கப்படும்போது, ஸ்கிரீன் ரீடர் கிடைக்கக்கூடிய விருப்பங்களை அறிவிக்கிறது.
• விசைப்பலகை வழிசெலுத்தல் (அம்பு விசைகள்) பயனர்களை விருப்பங்கள் வழியாக நகர்த்த அனுமதிக்கிறது.
• ஒரு விருப்பத்தைத் தேர்ந்தெடுப்பது எதிர்பார்த்த செயலைத் தூண்டுகிறது, மேலும் ஸ்கிரீன் ரீடர் புதிய தேர்வை அறிவிக்கிறது.
• Escape விசையைப் பயன்படுத்தி கீழிறங்கு மெனுவை மூட முடியும்.

2. தானியங்கி அணுகல் சோதனை கருவிகள்

தானியங்கி கருவிகள் விடுபட்ட ARIA பண்புக்கூறுகள், போதிய வண்ண மாறுபாடு மற்றும் உடைந்த இணைப்புகள் போன்ற பொதுவான அணுகல் சிக்கல்களை விரைவாக அடையாளம் காண முடியும். இருப்பினும், அவை சோதனையின் ஒரே முறையாக நம்பப்படக்கூடாது, ஏனெனில் அவை அனைத்து அணுகல் சிக்கல்களையும், குறிப்பாக சிக்கலான ஜாவாஸ்கிரிப்ட் ஊடாட்டங்கள் தொடர்பான சிக்கல்களைக் கண்டறிய முடியாது.

பிரபலமான தானியங்கி அணுகல் சோதனை கருவிகள்:

• axe DevTools: உங்கள் மேம்பாட்டு பணிப்பாய்வுடன் ஒருங்கிணைக்கும் ஒரு உலாவி நீட்டிப்பு மற்றும் கட்டளை-வரி கருவி.
• WAVE (Web Accessibility Evaluation Tool): அணுகல் சிக்கல்கள் குறித்த காட்சிப் பின்னூட்டத்தை வழங்கும் ஒரு உலாவி நீட்டிப்பு.
• Lighthouse (Google Chrome): Chrome DevTools-இல் கட்டமைக்கப்பட்ட ஒரு தானியங்கி கருவி, இது அணுகல் தணிக்கைகளை உள்ளடக்கியது.
• Accessibility Insights: மைக்ரோசாப்ட்டிலிருந்து ஒரு கருவித் தொகுப்பு, உலாவி நீட்டிப்புகள் மற்றும் ஒரு விண்டோஸ் பயன்பாட்டை உள்ளடக்கியது.

உங்கள் பணிப்பாய்வில் தானியங்கி சோதனையை ஒருங்கிணைத்தல்:

• தானியங்கி சோதனைகளைத் தவறாமல் இயக்கவும்: மேம்பாட்டு செயல்முறையின் ஆரம்பத்திலேயே அணுகல் சிக்கல்களைக் கண்டறிய உங்கள் தொடர்ச்சியான ஒருங்கிணைப்பு (CI) பைப்லைனில் தானியங்கி சோதனையை இணைக்கவும்.
• கைமுறை சோதனைக்கு துணையாக தானியங்கி சோதனைகளைப் பயன்படுத்தவும்: கைமுறை சோதனைக்கு முன் சாத்தியமான சிக்கல்களை அடையாளம் காண தானியங்கி சோதனைகளைப் பயன்படுத்தவும், இது கைமுறை சோதனை செயல்முறையை மிகவும் திறமையானதாக மாற்றும்.
• அடையாளம் காணப்பட்ட சிக்கல்களை உடனடியாக சரிசெய்யவும்: தானியங்கி சோதனைகளால் அடையாளம் காணப்பட்ட அணுகல் சிக்கல்களை சரிசெய்வதற்கு முன்னுரிமை அளியுங்கள்.

3. ARIA பண்புக்கூறு சரிபார்ப்பு

குறிப்பாக தனிப்பயன் ஜாவாஸ்கிரிப்ட் கூறுகளுக்கு, கூறுகளின் பங்கு, நிலை மற்றும் பண்புகள் பற்றிய தகவல்களை ஸ்கிரீன் ரீடர்களுக்கு வழங்க ARIA பண்புக்கூறுகள் அவசியம். ARIA பண்புக்கூறுகளை சரிபார்ப்பது அவை சரியாகவும் சீராகவும் பயன்படுத்தப்படுவதை உறுதி செய்கிறது.

ஜாவாஸ்கிரிப்ட் அணுகலுக்கான முக்கிய ARIA பண்புக்கூறுகள்:

• role: ஒரு உறுப்பின் சொற்பொருள் பங்களிப்பை வரையறுக்கிறது (எ.கா., role="button", role="dialog").
• aria-label: ஒரு புலப்படும் லேபிள் கிடைக்காதபோது ஒரு உறுப்புக்கு உரை லேபிளை வழங்குகிறது.
• aria-labelledby: தற்போதைய உறுப்புக்கான லேபிளை வழங்கும் பக்கத்தில் உள்ள மற்றொரு உறுப்பைக் குறிப்பிடுகிறது.
• aria-describedby: தற்போதைய உறுப்புக்கான விளக்கத்தை வழங்கும் பக்கத்தில் உள்ள மற்றொரு உறுப்பைக் குறிப்பிடுகிறது.
• aria-hidden: ஒரு உறுப்பு மற்றும் அதன் சந்ததியினர் உதவித் தொழில்நுட்பங்களிலிருந்து மறைக்கப்பட்டுள்ளார்களா என்பதைக் குறிக்கிறது.
• aria-live: பக்கத்தின் ஒரு பகுதி மாறும் தன்மை கொண்டது மற்றும் பக்க மறுஏற்றம் இல்லாமல் புதுப்பிக்கப்படலாம் என்பதைக் குறிக்கிறது. பொதுவான மதிப்புகள் "off", "polite", மற்றும் "assertive" ஆகும்.
• aria-atomic: aria-live பகுதியில் மாற்றங்கள் நிகழும்போது முழு பகுதியும் கருத்தில் கொள்ளப்பட வேண்டுமா என்பதைக் குறிக்கிறது.
• aria-relevant: aria-live பகுதியில் எந்த வகையான மாற்றங்கள் அறிவிக்கப்பட வேண்டும் என்பதைக் குறிக்கிறது (எ.கா., "additions text").
• aria-expanded: ஒரு உறுப்பு விரிவாக்கப்பட்டுள்ளதா அல்லது சுருக்கப்பட்டுள்ளதா என்பதைக் குறிக்கிறது.
• aria-selected: ஒரு உறுப்பு தேர்ந்தெடுக்கப்பட்டுள்ளதா என்பதைக் குறிக்கிறது.
• aria-haspopup: ஒரு உறுப்பில் பாப்அப் மெனு அல்லது உரையாடல் உள்ளதா என்பதைக் குறிக்கிறது.
• aria-disabled: ஒரு உறுப்பு முடக்கப்பட்டுள்ளது என்பதைக் குறிக்கிறது.

ARIA பண்புக்கூறு சரிபார்ப்புக்கான கருவிகள்:

• உலாவி டெவலப்பர் கருவிகள்: பெரும்பாலான உலாவி டெவலப்பர் கருவிகள் உறுப்புகளின் ARIA பண்புக்கூறுகளை ஆய்வு செய்ய உங்களை அனுமதிக்கின்றன.
• அணுகல் லின்டர்கள்: பொதுவான ARIA பண்புக்கூறு பிழைகளை சரிபார்க்க லின்டர்களை உள்ளமைக்க முடியும்.

எடுத்துக்காட்டு: மாறும் உள்ளடக்க புதுப்பிப்புகளுக்கு aria-live பயன்படுத்துதல்

புதிய செய்திகளுடன் மாறும் வகையில் புதுப்பிக்கப்படும் ஒரு அறிவிப்புப் பகுதி உங்களிடம் இருந்தால், இந்த புதுப்பிப்புகளைப் பற்றி ஸ்கிரீன் ரீடர் பயனர்களுக்குத் தெரிவிக்க aria-live பண்புக்கூற்றைப் பயன்படுத்தலாம்:

            <div id="notification-area" aria-live="polite">
  <!-- Notification messages will be added here -->
</div>
            

              
                Copy
              
            
          

aria-live="polite" பண்புக்கூறு, பயனர் வேறு எதனுடனும் தீவிரமாக ஊடாடாதபோது மட்டுமே இந்த பகுதிக்கான புதுப்பிப்புகளை அறிவிக்குமாறு ஸ்கிரீன் ரீடருக்குச் சொல்கிறது.

4. விசைப்பலகை வழிசெலுத்தல் சோதனை

சுட்டியைப் பயன்படுத்த முடியாத பயனர்களுக்கு, ஸ்கிரீன் ரீடர்களை நம்பியிருக்கும் பார்வை குறைபாடுள்ள பயனர்கள் உட்பட, விசைப்பலகை வழிசெலுத்தல் அவசியம். உங்கள் வலைத்தளத்தில் உள்ள அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகையைப் பயன்படுத்தி அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும்.

முக்கிய விசைப்பலகை வழிசெலுத்தல் கருத்துகள்:

• கவன வரிசை: கவன வரிசை பக்கத்தின் வழியாக ஒரு தர்க்கரீதியான மற்றும் உள்ளுணர்வு பாதையைப் பின்பற்ற வேண்டும்.
• கவன குறிகாட்டிகள்: அனைத்து கவனம் செலுத்தக்கூடிய கூறுகளுக்கும் ஒரு தெளிவான மற்றும் புலப்படும் கவனக் குறிக்காட்டி இருக்க வேண்டும்.
• விசைப்பலகை பொறிகள்: பயனர்கள் ஒரு குறிப்பிட்ட உறுப்புக்குள் சிக்கி, வெளியே செல்ல முடியாத விசைப்பலகை பொறிகளை உருவாக்குவதைத் தவிர்க்கவும்.
• தனிப்பயன் விசைப்பலகை ஊடாட்டங்கள்: நீங்கள் தனிப்பயன் விசைப்பலகை ஊடாட்டங்களை (எ.கா., ஒரு கட்டத்தை வழிநடத்த அம்பு விசைகளைப் பயன்படுத்துதல்) செயல்படுத்தினால், இந்த ஊடாட்டங்கள் நன்கு ஆவணப்படுத்தப்பட்டு பயனர் எதிர்பார்ப்புகளுடன் ஒத்துப்போவதை உறுதிப்படுத்தவும்.

விசைப்பலகை வழிசெலுத்தலைச் சோதித்தல்:

• Tab விசையைப் பயன்படுத்தவும்: பக்கத்தின் வழியாக செல்ல Tab விசையைப் பயன்படுத்தவும் மற்றும் கவன வரிசை தர்க்கரீதியானதா என்பதை சரிபார்க்கவும்.
• Shift+Tab ஐப் பயன்படுத்தவும்: பக்கத்தின் வழியாக பின்னோக்கி செல்ல Shift+Tab ஐப் பயன்படுத்தவும்.
• தனிப்பயன் விசைப்பலகை ஊடாட்டங்களைச் சோதிக்கவும்: எந்தவொரு தனிப்பயன் விசைப்பலகை ஊடாட்டங்களும் பயன்படுத்தக்கூடியதாகவும் அணுகக்கூடியதாகவும் இருப்பதை உறுதிப்படுத்த அவற்றைச் சோதிக்கவும்.

5. வண்ண மாறுபாடு சோதனை

போதிய வண்ண மாறுபாடு, குறைந்த பார்வை கொண்ட பயனர்கள் உரையைப் படிப்பதற்கும் பக்கத்தில் உள்ள கூறுகளை வேறுபடுத்துவதற்கும் கடினமாக்கும். உங்கள் வலைத்தளம் WCAG வண்ண மாறுபாடு தேவைகளைப் பூர்த்தி செய்வதை உறுதிப்படுத்தவும்.

WCAG வண்ண மாறுபாடு தேவைகள்:

• உரை உள்ளடக்கம்: சாதாரண உரைக்கு குறைந்தபட்சம் 4.5:1 மற்றும் பெரிய உரைக்கு (18pt அல்லது 14pt தடித்தது) 3:1 என்ற மாறுபாடு விகிதம்.
• உரையற்ற உள்ளடக்கம்: பயனர் இடைமுகக் கூறுகள் மற்றும் வரைகலை பொருட்களுக்கு குறைந்தபட்சம் 3:1 என்ற மாறுபாடு விகிதம்.

வண்ண மாறுபாடு சோதனைக்கான கருவிகள்:

• WebAIM Color Contrast Checker: வண்ண மாறுபாடு விகிதங்களைச் சரிபார்ப்பதற்கான ஒரு வலை அடிப்படையிலான கருவி.
• axe DevTools: வண்ண மாறுபாடு சிக்கல்களை அடையாளம் காண முடியும்.
• உலாவி டெவலப்பர் கருவிகள்: உறுப்புகளின் வண்ண மாறுபாட்டை ஆய்வு செய்ய உங்களை அனுமதிக்கின்றன.

6. WCAG இணக்க சரிபார்ப்பு

வலை உள்ளடக்க அணுகல் வழிகாட்டுதல்கள் (WCAG) என்பது மாற்றுத்திறனாளிகளுக்கு வலை உள்ளடக்கத்தை அணுகக்கூடியதாக மாற்றுவதற்கான சர்வதேச அளவில் அங்கீகரிக்கப்பட்ட வழிகாட்டுதல்களின் தொகுப்பாகும். WCAG 2.1 நிலை AA-க்கு இணங்குவதை நோக்கமாகக் கொள்ளுங்கள், இது வலை அணுகலுக்கான தரமாக பரவலாகக் கருதப்படுகிறது.

WCAG வெற்றி அளவுகோல்களைப் புரிந்துகொள்ளுதல்:

WCAG நான்கு கொள்கைகளை (POUR) சுற்றி ஒழுங்கமைக்கப்பட்டுள்ளது:

• புலப்படக்கூடியது: தகவல் மற்றும் பயனர் இடைமுகக் கூறுகள் பயனர்கள் உணரக்கூடிய வழிகளில் வழங்கப்பட வேண்டும்.
• இயக்கக்கூடியது: பயனர் இடைமுகக் கூறுகள் மற்றும் வழிசெலுத்தல் இயக்கக்கூடியதாக இருக்க வேண்டும்.
• புரிந்துகொள்ளக்கூடியது: தகவல் மற்றும் பயனர் இடைமுகத்தின் செயல்பாடு புரிந்துகொள்ளக்கூடியதாக இருக்க வேண்டும்.
• வலிமையானது: உள்ளடக்கம் உதவித் தொழில்நுட்பங்கள் உட்பட பல்வேறு பயனர் முகவர்களால் நம்பத்தகுந்த முறையில் விளக்கப்படக்கூடிய அளவுக்கு வலிமையாக இருக்க வேண்டும்.

ஒவ்வொரு கொள்கைக்கும் வழிகாட்டுதல்கள் உள்ளன, மேலும் ஒவ்வொரு வழிகாட்டுதலுக்கும் சோதிக்கக்கூடிய வெற்றி அளவுகோல்கள் உள்ளன. WCAG இணக்கத்தை உறுதிப்படுத்த இந்த வெற்றி அளவுகோல்களைப் புரிந்துகொள்வது முக்கியம்.

7. பன்னாட்டாக்கமாக்கல் (i18n) மற்றும் உள்ளூர்மயமாக்கல் (l10n) கருத்தில் கொள்ள வேண்டியவை

உலகளாவிய பார்வையாளர்களுக்காக, உங்கள் ஜாவாஸ்கிரிப்ட்-இயங்கும் வலை பயன்பாடுகளின் பன்னாட்டாக்கமாக்கல் மற்றும் உள்ளூர்மயமாக்கலைக் கருத்தில் கொள்ளுங்கள். இது உங்கள் உள்ளடக்கம் மற்றும் செயல்பாடுகளை வெவ்வேறு மொழிகள், கலாச்சாரங்கள் மற்றும் பிராந்தியங்களுக்கு ஏற்ப மாற்றுவதை உள்ளடக்கியது.

அணுகலுக்கான முக்கிய i18n/l10n கருத்தில் கொள்ள வேண்டியவை:

• மொழி பண்புக்கூறுகள்: உள்ளடக்கத்தின் மொழியைக் குறிப்பிட <html> உறுப்பு மற்றும் பிற தொடர்புடைய உறுப்புகளில் lang பண்புக்கூற்றைப் பயன்படுத்தவும். இது சரியான உச்சரிப்பைத் தேர்ந்தெடுக்க ஸ்கிரீன் ரீடர்களுக்கு உதவுகிறது.
• உரை திசை: இடமிருந்து-வலம் (LTR) மற்றும் வலமிருந்து-இடம் (RTL) ஆகிய இரண்டு மொழிகளையும் ஆதரிக்கவும். உரை திசையைக் கையாள direction மற்றும் unicode-bidi போன்ற CSS பண்புகளைப் பயன்படுத்தவும்.
• தேதி மற்றும் நேர வடிவங்கள்: வெவ்வேறு வட்டாரங்களுக்கு பொருத்தமான தேதி மற்றும் நேர வடிவங்களைப் பயன்படுத்தவும்.
• எண் வடிவங்கள்: வெவ்வேறு வட்டாரங்களுக்கு பொருத்தமான எண் வடிவங்களைப் பயன்படுத்தவும்.
• நாணய வடிவங்கள்: வெவ்வேறு வட்டாரங்களுக்கு பொருத்தமான நாணய வடிவங்களைப் பயன்படுத்தவும்.
• எழுத்துரு குறியாக்கம்: பரந்த அளவிலான எழுத்துக்களை ஆதரிக்க UTF-8 எழுத்துரு குறியாக்கத்தைப் பயன்படுத்தவும்.
• பட உள்ளூர்மயமாக்கல்: உரை அல்லது கலாச்சாரக் குறிப்புகளைக் கொண்ட படங்களின் உள்ளூர்மயமாக்கப்பட்ட பதிப்புகளை வழங்கவும்.
• பல்வேறு மொழிகளுக்கான ஸ்கிரீன் ரீடர் ஆதரவு: நீங்கள் சோதிக்கும் ஸ்கிரீன் ரீடர்கள் நீங்கள் இலக்கு வைக்கும் மொழிகளை ஆதரிக்கின்றன என்பதை உறுதிப்படுத்தவும்.

அணுகக்கூடிய ஜாவாஸ்கிரிப்ட் மேம்பாட்டிற்கான சிறந்த நடைமுறைகள்

மேம்பாட்டின் போது இந்த சிறந்த நடைமுறைகளைச் செயல்படுத்துவது உங்கள் ஜாவாஸ்கிரிப்ட்-இயங்கும் வலை பயன்பாடுகளின் அணுகலை கணிசமாக மேம்படுத்தும்:

• சொற்பொருள் HTML-ஐப் பயன்படுத்தவும்: உங்கள் உள்ளடக்கத்தை கட்டமைக்க சொற்பொருள் HTML5 குறிச்சொற்களை (எ.கா., <article>, <nav>, <aside>, <main>) பயன்படுத்தவும்.
• ARIA பண்புக்கூறுகளை வழங்கவும்: தனிப்பயன் கூறுகள் மற்றும் மாறும் உள்ளடக்கத்தின் அணுகலை மேம்படுத்த ARIA பண்புக்கூறுகளைப் பயன்படுத்தவும்.
• கவனத்தை நிர்வகிக்கவும்: பயனர்கள் விசைப்பலகை மூலம் பக்கத்தை எளிதாக வழிநடத்த முடியும் என்பதை உறுதிப்படுத்த சரியான கவன நிர்வாகத்தைச் செயல்படுத்தவும்.
• ARIA லைவ் பகுதிகளைப் பயன்படுத்தவும்: மாறும் உள்ளடக்கப் புதுப்பிப்புகள் பற்றி ஸ்கிரீன் ரீடர் பயனர்களுக்குத் தெரிவிக்க ARIA லைவ் பகுதிகளைப் பயன்படுத்தவும்.
• ஸ்கிரீன் ரீடர்களுடன் ஆரம்பத்திலும் அடிக்கடி சோதிக்கவும்: ஆரம்பத்திலிருந்தே உங்கள் மேம்பாட்டுப் பணிப்பாய்வில் ஸ்கிரீன் ரீடர் சோதனையை ஒருங்கிணைக்கவும்.
• அணுகக்கூடிய ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதவும்: ஜாவாஸ்கிரிப்ட் குறியீட்டை எழுதும்போது அணுகல் சிறந்த நடைமுறைகளைப் பின்பற்றவும்.
• அணுகக்கூடிய ஜாவாஸ்கிரிப்ட் நூலகங்கள் மற்றும் கட்டமைப்புகளைப் பயன்படுத்தவும்: அணுகலுக்கு முன்னுரிமை அளிக்கும் ஜாவாஸ்கிரிப்ட் நூலகங்கள் மற்றும் கட்டமைப்புகளைத் தேர்வுசெய்யவும்.
• உங்கள் குறியீட்டை ஆவணப்படுத்தவும்: எந்தவொரு அணுகல் கருத்தாய்வுகளையும் உள்ளடக்கி, உங்கள் குறியீட்டைத் தெளிவாக ஆவணப்படுத்தவும்.
• பயனர் கருத்தைப் பெறவும்: சாத்தியமான அணுகல் சிக்கல்களை அடையாளம் காண மாற்றுத்திறனாளிகளிடமிருந்து கருத்துக் கேட்கவும்.
• வழிசெலுத்தல் இணைப்புகளைத் தவிர்க்கவும்: பயனர்கள் மீண்டும் மீண்டும் வரும் வழிசெலுத்தல் கூறுகளைத் தவிர்த்து நேரடியாக முக்கிய உள்ளடக்கத்திற்குச் செல்ல அனுமதிக்கவும்.
• விளக்கமான இணைப்பு உரையைப் பயன்படுத்தவும்: "இங்கே கிளிக் செய்யவும்" போன்ற பொதுவான இணைப்பு உரையைத் தவிர்க்கவும். இணைப்பின் இலக்கைத் தெளிவாகக் குறிக்கும் விளக்கமான இணைப்பு உரையைப் பயன்படுத்தவும்.
• படங்களுக்கு உரை மாற்றுகளை வழங்கவும்: படங்களுக்கு உரை மாற்றுகளை வழங்க alt பண்புக்கூற்றைப் பயன்படுத்தவும்.
• வீடியோக்களுக்கு தலைப்புகள் மற்றும் டிரான்ஸ்கிரிப்ட்களைப் பயன்படுத்தவும்: காது கேளாத அல்லது செவித்திறன் குறைந்த பயனர்களுக்கு வீடியோக்களை அணுகக்கூடியதாக மாற்ற தலைப்புகளை வழங்கவும். ஆடியோ உள்ளடக்கத்திற்கு டிரான்ஸ்கிரிப்ட்களை வழங்கவும்.
• படிவ அணுகலை உறுதிப்படுத்தவும்: படிவப் புலங்களுக்கு சரியான லேபிள்களைப் பயன்படுத்தவும் மற்றும் தெளிவான பிழைச் செய்திகளை வழங்கவும்.
• பிழை கையாளுதலைச் செயல்படுத்தவும்: பயனர்களுக்கு தெளிவான மற்றும் தகவலறிந்த பிழைச் செய்திகளை வழங்கவும்.

முடிவுரை

ஜாவாஸ்கிரிப்ட் ஸ்கிரீன் ரீடர் இணக்கத்தன்மைக்கான வலை அணுகல் சோதனை என்பது உள்ளடக்கிய வடிவமைப்பு மற்றும் மேம்பாட்டு நடைமுறைகளுக்கான அர்ப்பணிப்பு தேவைப்படும் ஒரு தொடர்ச்சியான செயல்முறையாகும். சவால்களைப் புரிந்துகொள்வதன் மூலமும், பொருத்தமான சோதனை நுட்பங்களைச் செயல்படுத்துவதன் மூலமும், இந்த வழிகாட்டியில் கோடிட்டுக் காட்டப்பட்டுள்ள சிறந்த நடைமுறைகளைப் பின்பற்றுவதன் மூலமும், நீங்கள் அனைவராலும், அவர்களின் திறன்களைப் பொருட்படுத்தாமல் அணுகக்கூடிய மற்றும் பயன்படுத்தக்கூடிய வலை பயன்பாடுகளை உருவாக்க முடியும். கைமுறை ஸ்கிரீன் ரீடர் சோதனைக்கு முன்னுரிமை அளிக்கவும், அதை தானியங்கி கருவிகளுடன் துணைபுரியவும், மேலும் அனைத்து பயனர்களுக்கும் பயனர் அனுபவத்தை மேம்படுத்த எப்போதும் முயற்சி செய்யவும் நினைவில் கொள்ளுங்கள்.

வலை அணுகலை ஏற்றுக்கொள்வதன் மூலம், நீங்கள் சட்டத் தேவைகளுக்கு இணங்குவது மட்டுமல்லாமல், பரந்த பார்வையாளர்களுக்கு உங்கள் வரம்பை விரிவுபடுத்துகிறீர்கள் மற்றும் உலக அளவில் உள்ளடக்கம் மற்றும் சமூகப் பொறுப்புக்கான அர்ப்பணிப்பை வெளிப்படுத்துகிறீர்கள்.